<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TabAPI</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrapEx.css">
    <link rel="stylesheet" href="../js/prettyPrint/css/prettify.css">
    <link rel="stylesheet" href="api.css">


    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/prettyPrint/js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
    <div class="container-fluid">
        <div class="">
            <div class="span12">
                <h1>属性</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.Tab </h3>
                添加引用
                <pre class="prettyprint linenums"><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrap.min.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrapEx.css&quot;&gt;
 
 &lt;script src=&quot;../../js/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrapEx2.0.js&quot;&gt;&lt;/script&gt;</code></pre>
                <p>继承自bsEx.ui.base:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">id</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.getId()</div>
                        <div class="col-xs-5 col-sm-5">控件ID</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">renderto</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-5 col-sm-5">绘制到容器的对象或选择器</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">type</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">Tab</div>
                        <div class="col-xs-5 col-sm-5">控件类型</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">firstInit</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">第一次加载是否完成</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">language</div>
                        <div class="col-xs-2 col-sm-2">bsEx.language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN</div>
                        <div class="col-xs-5 col-sm-5">当前语言包</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">cls</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">自定义样式 在绘制之前会在renderto加入该样式</div>
                    </div>
                </div>
                <p>控件实例属性:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">navtabs</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">页签头部对象</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">tabcontent</div>
                        <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-5 col-sm-5">页签主体对象</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">tabs</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">子页签集合</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">fade</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">切换子页签时是否有过度效果</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showrmenu</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示右键菜单 基于插件 <a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201512192921.html" target="_black">bootstrap-menu</a></div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">close</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">ex.delanguage().Tab.close|"关闭当前"</div>
                        <div class="col-xs-5 col-sm-5">关闭显示名称</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">closeother</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">ex.delanguage().Tab.closeother|"关闭其他页签"</div>
                        <div class="col-xs-5 col-sm-5">关闭其他显示名称</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">closeall</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">ex.delanguage().Tab.closeall|"关闭全部页签"</div>
                        <div class="col-xs-5 col-sm-5">关闭全部显示名称</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                    <h3>bsEx.Tab.items </h3>
                    <p>tabs子页签</p>
                    <div class="table">
                        <div class="row title">
                            <div class="col-xs-2 col-sm-2">属性名称</div>
                            <div class="col-xs-2 col-sm-2">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-5 col-sm-5">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">id</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签ID</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">title</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签标题</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">url</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签页面地址，如果子页签是iframe</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">isiframe</div>
                            <div class="col-xs-2 col-sm-2">boolean</div>
                            <div class="col-xs-3 col-sm-3">false</div>
                            <div class="col-xs-5 col-sm-5">是否生成ifram</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">active</div>
                            <div class="col-xs-2 col-sm-2">boolean</div>
                            <div class="col-xs-3 col-sm-3">false</div>
                            <div class="col-xs-5 col-sm-5">是否在生成时激活</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">iframe</div>
                            <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签iframe对象</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">iframefn</div>
                            <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">返回ifram 的中的contentWindow对象，用于执行function </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">tabel</div>
                            <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签头部对象</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">bodyel</div>
                            <div class="col-xs-2 col-sm-2">object(jqDOM)</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">子页签主体对象</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">load</div>
                            <div class="col-xs-2 col-sm-2">function</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">iframe中load 事件触发回调函数</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">showclosebtn</div>
                            <div class="col-xs-2 col-sm-2">boolean</div>
                            <div class="col-xs-3 col-sm-3">false</div>
                            <div class="col-xs-5 col-sm-5">是否显示关闭按钮</div>
                        </div>
                    </div>
                    <h4>示例</h4>
                    <pre class="prettyprint linenums"><code>略</code> </pre>
                    <hr/>
                </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>方法</h1>
                <hr/>
            </div>
            <div class="">
                <h3>init() <small>返回类型: 无</small></h3>
                <p>绘制方法</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>doLayout() <small>返回类型: 无</small></h3>
                <p>重置内部的iframe布局 使其适应tab大小</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>show(tab) <small>返回类型: 无</small></h3>
                <p>显示指定子页签</p>
                 <div class="table">
                        <div class="row title">
                            <div class="col-xs-3 col-sm-3">参数名称</div>
                            <div class="col-xs-3 col-sm-3">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-3 col-sm-3">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">tab</div>
                            <div class="col-xs-3 col-sm-3">object</div>
                            <div class="col-xs-3 col-sm-3">无(必填)</div>
                            <div class="col-xs-3 col-sm-3">指定的子页签</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = bsEx.Tab({...});
 tab1.show(0);//显示第一个子页签 从0开始
 tab1.show("bsex1-1");//显示ID为bsex1-1的子页签
 tab1.show(tab1.tabs[0]);//显示第一个子页签</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>hide(tab) <small>返回类型: 无</small></h3>
                <p>关闭指定子页签，元素会被直接remove，而不是隐藏</p>
                <div class="table">
                       <div class="row title">
                           <div class="col-xs-3 col-sm-3">参数名称</div>
                           <div class="col-xs-3 col-sm-3">类型</div>
                           <div class="col-xs-3 col-sm-3">默认值</div>
                           <div class="col-xs-3 col-sm-3">备注说明</div>
                       </div>
                       <div class="row">
                           <div class="col-xs-3 col-sm-3">tab</div>
                           <div class="col-xs-3 col-sm-3">object</div>
                           <div class="col-xs-3 col-sm-3">无(必填)</div>
                           <div class="col-xs-3 col-sm-3">指定的子页签</div>
                       </div>
                   </div>
               <h4>示例</h4>
               <pre class="prettyprint linenums"><code> var tab1 = bsEx.Tab({...});
tab1.hide(0);//关闭第一个子页签 从0开始
tab1.hide("bsex1-1");//关闭ID为bsex1-1的子页签
tab1.hide(tab1.tabs[0]);//关闭第一个子页签</code> </pre>
               <hr/>
            </div>
            <div class="">
                <h3>isactive(tab) <small>返回类型: boolean</small></h3>
                <p>是否是激活/显示状态，显示返回true</p>
                <div class="table">
                        <div class="row title">
                            <div class="col-xs-3 col-sm-3">参数名称</div>
                            <div class="col-xs-3 col-sm-3">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-3 col-sm-3">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">tab</div>
                            <div class="col-xs-3 col-sm-3">object</div>
                            <div class="col-xs-3 col-sm-3">无(必填)</div>
                            <div class="col-xs-3 col-sm-3">指定的子页签</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = bsEx.Tab({...});
 tab1.isactive(0);//第一个子页签是否显示 从0开始
 tab1.isactive("bsex1-1");//ID为bsex1-1的子页签是否显示
 tab1.isactive(tab1.tabs[0]);//第一个子页签是否显示</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>getactive() <small>返回类型: bsEx.Tab.items </small></h3>
                <p>得到当前激活的子页签实例</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>addTab(tab) <small>返回类型: 无</small></h3>
                <p>添加子页签</p>
                <div class="table">
                        <div class="row title">
                            <div class="col-xs-3 col-sm-3">参数名称</div>
                            <div class="col-xs-3 col-sm-3">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-3 col-sm-3">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">tab</div>
                            <div class="col-xs-3 col-sm-3">bsEx.Tab.items</div>
                            <div class="col-xs-3 col-sm-3">无(必填)</div>
                            <div class="col-xs-3 col-sm-3">子页签对象</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = bsEx.Tab({...});
 tab1.addTab({id:"tabs1",url:"XXX.html",title:"添加一个子页签",active:true});//添加一个子页签并显示</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>getTab(tab) <small>返回类型: bsEx.Tab.items</small></h3>
                <p>得到指定子页签对象</p>
                <div class="table">
                        <div class="row title">
                            <div class="col-xs-3 col-sm-3">参数名称</div>
                            <div class="col-xs-3 col-sm-3">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-3 col-sm-3">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">tab</div>
                            <div class="col-xs-3 col-sm-3">object</div>
                            <div class="col-xs-3 col-sm-3">无(必填)</div>
                            <div class="col-xs-3 col-sm-3">指定的子页签</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>getTabIndex(tab) <small>返回类型: number</small></h3>
                <p>得到指定子页签对象序号 从0开始</p>
                <div class="table">
                        <div class="row title">
                            <div class="col-xs-3 col-sm-3">参数名称</div>
                            <div class="col-xs-3 col-sm-3">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-3 col-sm-3">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3">tab</div>
                            <div class="col-xs-3 col-sm-3">object</div>
                            <div class="col-xs-3 col-sm-3">无(必填)</div>
                            <div class="col-xs-3 col-sm-3">指定的子页签</div>
                        </div>
                    </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>事件</h1>
                <hr/>
            </div>
            <div>
                <h3>注</h3>
                <pre class="prettyprint"><code>$(tab1.renderto)会继承bootstrap原生tab的事件，即
show.bs.tab|shown.bs.tab|hide.bs.tab|hidden.bs.tab
写法为 $(tab1.renderto).on('show.bs.tab', function(){});...</code> </pre>
                <hr>
            </div>
            <div class="">
                <h3>beforeinit(t) <small>返回类型: 无</small></h3>
                <p>绘制前事件，执行init()后第一个执行，可以对实例进行操作影响init执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = new bsEx.Tab("#tab1");//创建控件
 tab1.on("beforeinit",function(t){alert(t.id++"绘制开始")});//bsex1绘制开始</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>inited(t) <small>返回类型: 无</small></h3>
                <p>绘制后事件，执行init()后执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = new bsEx.Tab("#tab1");//创建控件
 tab1.on("inited",function(t){alert(t.id+"绘制完毕")});//bsex1绘制完毕</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>active(t,tab) <small>返回类型: 无</small></h3>
                <p>切换子页签后触发</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">bsEx.Tab</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">tab</div>
                        <div class="col-xs-3 col-sm-3">bsEx.Tab.items </div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前激活的子页签实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> var tab1 = new bsEx.Tab("#tab1");//创建控件
 tab1.on("active",function(t,tab){alert(tab.title+"被激活")});</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>hidden(t) <small>返回类型: 无</small></h3>
                <p>页签关闭事件</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">当前控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
        </div>
</body>
<script>
      $(document).ready(function () {
          $.each($(".table").find(".row div"),function(i,t){
              $(t).removeClass("col-xs-3 col-sm-3");
          });
          $.each($(".table").find(".row"),function(i,t){
              $(t).find("div").eq(0).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(1).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(2).addClass("col-xs-3 col-sm-3");
              $(t).find("div").eq(3).addClass("col-xs-5 col-sm-5");
          });
      });
</script>
</html>